import React, { memo, useEffect } from 'react'
import { useParams } from 'react-router-dom'
import { useDispatch } from 'react-redux'

import {
  PlaylistDetailWrapper,
  LeftWrapper,
  RightWrapper
} from './style'
import PlaylistInfo from './c-cpns/playlist-info'
import SongList from './c-cpns/song-list'
import PlaylistComment from './c-cpns/playlist-comment'
import LovePeople from './c-cpns/love-people'
import HotPlaylist from './c-cpns/hot-playlist'
import {
  getPlaylistDetailAction,
  getPlaylistCommentAction,
  getLovePeoplesAction
} from '../../store/actionCreators'

export default memo(function PlaylistDetail() {
  const { id } = useParams()
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getPlaylistDetailAction(id))
    dispatch(getPlaylistCommentAction(id))
    dispatch(getLovePeoplesAction(id))
  },[dispatch,id])
  return (
    <PlaylistDetailWrapper className="wrap-v2">
      <LeftWrapper> 
        <PlaylistInfo />
        <SongList />
        <PlaylistComment/>
      </LeftWrapper>
      <RightWrapper>
        <LovePeople />
        <HotPlaylist/>
      </RightWrapper>
    </PlaylistDetailWrapper>
  )
})
